import React, { PureComponent } from 'react';
import { Spin } from 'antd';
import { AdvancedSearch, DATA_ENTRY, NoDataC, ContentPackage } from '../../../components';
import moment from 'moment';
import RateCardC from './rateCardC';

import { connect } from 'dva';

class ExchangeRate extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      searchObj: {},
      dataSource: [],
      isReset: false, // 是否点击重置
    };
  }

  componentDidMount() {
    this.getTableData();
  }

  // 获取表格数据
  getTableData = () => {
    const { searchObj } = this.state;
    this.setState(
      {
        dataSource: undefined,
      },
      () => {
        this.props.dispatch({
          type: 'exchangeRateMessageM/getTableData',
          payload: {
            searchDate: moment().format('YYYY-MM-DD'),
            ...searchObj,
            currentPage: 1,
            numInPage: 999,
          },
          callback: (type, data) => {
            if (type == 'success') {
              this.setState({
                dataSource: data.dataSource,
              });
            }
          },
        });
      },
    );
  };

  // 查询
  queryTableList = (e) => {
    const tempQuery = {};
    for (const k in e) {
      if (k == 'searchDate') {
        tempQuery[k] = e[k].format('YYYY-MM-DD');
      } else {
        tempQuery[k] = e[k];
      }
    }
    this.setState(
      {
        searchObj: tempQuery,
        isReset: false,
      },
      () => {
        this.getTableData();
      },
    );
  };

  render() {
    const { dataSource } = this.state;
    const searchProps = {
      dataSource: [
        {
          dataIndex: 'searchDate',
          title: '日期',
          type: DATA_ENTRY.SINGLEDATE,
          initialValue: moment(),
        },
      ],
      // 点击查询按钮
      onQuery: (e) => {
        this.queryTableList(e);
      },
      onClear: () => {
        // 点击重置按钮
        this.setState({
          searchObj: {},
          isReset: true,
        });
      },
    };
    return (
      <ContentPackage
        title='汇率管理'
        contentHtml={
          <div>
            <div style={{ marginBottom: '10px' }}>
              <AdvancedSearch {...searchProps} />
            </div>
            <Spin spinning={this.props.loading.effects['exchangeRateMessageM/getTableData'] == true}>
              {dataSource && dataSource.length ? (
                <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap' }}>
                  {dataSource &&
                    dataSource.map((item) => {
                      return (
                        <div style={{ width: 'calc(50% - 10px)', marginBottom: '20px' }}>
                          <RateCardC cardData={item} />
                        </div>
                      );
                    })}
                </div>
              ) : (
                <NoDataC />
              )}
            </Spin>
          </div>
        }
      />
    );
  }
}

export default connect(({ exchangeRateMessageM, loading }) => ({
  exchangeRateMessageM,
  loading,
}))(ExchangeRate);
